<template>
	<view>
		<view class="yongjinBox">
			<view class="yongjin">佣金：￥<text style="font-size:22px">{{ dashboard.rights.commission }}</text></view>
			<view class="tixian" @tap="toTixian">提现</view>
		</view>
		<view class="comm">
			<scroll-view scroll-y="true" style="height:600px;width:100%;">
			    <view class="commissionbox" v-for="(item,index) in list" :key="index">
				    <view class="commjilu"><text>{{item.username}}</text><text>{{item.create_time}}</text></view>
					<view>提现金额：{{item.change_price}} 元</view>
					<view>提现前余额：{{item.before_price}} 元</view>
					<view>提现后余额：{{item.after_price}} 元</view>
					<view>描述：{{item.desc}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { pageUrl } from '@/utils/constants'
	import { getDashboardApi,commisionlistApi } from '@/api/member'
	import { computed, ref } from 'vue'
	import { onLoad, onShow,onReachBottom } from '@dcloudio/uni-app'
	import { useAddressStore, useMemberStore, useSettingStore } from '@/stores'
	import { reactive } from 'vue'
	const memberStore = useMemberStore()
	const addressStore = useAddressStore()
	const settingStore = useSettingStore()
	
	const dashboard = reactive({
	  rights: {
		commission: '0'
	  },
	})
	const getData = () => {
	  return new Promise(() => {
	    if (memberStore.profile?.token) {
	      getDashboardApi().then((res) => {
	        Object.assign(dashboard, res.result)
			uni.hideLoading()
			console.log('00000000000',res.result)
	      })
	    }
	  })
	}
	//获取佣金提现记录
	const queryList = (page : number, page_size : number) => {
		uni.showLoading({
			title: '数据加载中'
		});
		commisionlistApi(page, page_size).then((res) => {
			uni.hideLoading(); // 关闭loading动画
			console.log('999999', res)
			res.result.data.map((item) => {
				console.log('888888', item);
			})
			const dataList = res.result.data;
			if (dataList.length == 0 && params.value.page == 1) {
				// console.log('首次加载没数据');
				noMore.value = false;
				list.value = [];
			} else if (dataList.length < 3 && params.value.page == 1) {
				// console.log('首次加载有数据，但少于4条');
				noMore.value = true;
				list.value = dataList;
			} else if (dataList.length !== 0 && params.value.page == 1) {
				//console.log('1111','首次加载有数据');
				noMore.value = false;
				list.value = dataList;
			} else if (dataList.length !== 0 && params.value.page > 1) {
				//console.log('2222','上拉加载更多数据');
				noMore.value = false;
				list.value = list.value.concat(dataList);
				console.log('66666', list.value);
			} else if (dataList.length == 0 && params.value.page > 1) {
				//console.log('上拉加载没有更多数据了');
				noMore.value = true;
			}
		})
	}
	const noMore = ref(false)
	const isLoading = ref(false)
	const params = ref({ page: 1, pageSize: 10 })
	const list = ref([])
	console.log(params.value)
	onReachBottom(() => {
		if (!noMore.value) {
			params.value.page++;
			queryList(params.value.page, params.value.pageSize)
		}
	})
	
	const toTixian = () => {
		uni.navigateTo({
			url:pageUrl['commission-recharge']
		})
	}
	onLoad(()=>{
		getData()
		queryList(1,10)
	})
	onShow(()=>{
		getData()
		queryList(1,10)
	})
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
   .yongjinBox {
	   width:96%;
	   height:100px;
	   background-color:orangered;
	   border-radius: 15px;
	   margin:20px auto;
	   display: flex;
	   justify-content: space-between;
	   .yongjin {
		   height:40px;
		   line-height: 40px;
		   width:65%;
		   margin:30px 20px;
		   font-size:18px;
		   color:#ffffff;
	   }
	   .tixian {
		   height:40px;
		   width:20%;
		   margin:30px 20px;
		   color:#ffffff;
		   font-weight: bold;
		   text-align:center;
		   line-height: 40px;
	   }
   }
   .commissionbox {
	   height:180px;
	   line-height:30px;
	   background-color:#ffffff;
	   padding:10px;
	   width:96%;
	   margin:10px auto;
	   color:#999999;
   }
   .commjilu {
	   display: flex;
	   flex-wrap: wrap;
	   justify-content: space-between;
	   margin-bottom:5px;
   }
   .comm {
	   width:96%;
	   height:600px;
	   margin:10px auto;
   }
</style>
